<template>
  <header>
    <el-row class="top">
      <el-col :span="6">
        <img src="./assets/logo/byyl-logo1.png" class="logoImg"/>
      </el-col>
      <el-col :span="4" :offset="14">
        <el-row style="line-height: 70px;">
          <el-col :span="3">
            <img src="./assets/images/antOutline-bell.svg" class="messageImg">
          </el-col>
          <el-col :span="3">
            <!--<img src="./assets/images/profile.jpg" class="profileImg">-->
            <img :src="avatarFilePath" class="profileImg">
          </el-col>
          <el-col :span="16" style="text-align: left">
            <span class="profileSpan">用户名：{{user.name}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </header>
  <router-view/>
</template>
<script>
  import {setToken,removeToken,getToken} from '@/utils/auth'
  import {getInfo} from '@/api/login'
  export default {
    name: "index",
    data() {
      return {
        avatarFilePath: require('@/assets/images/profile.jpg'),
        user: {},
      };
    },
    watch: {},
    created() {
      this.getInfo();
    },
    methods: {
      getInfo(){
        // 获得token  如果token存在  那么就去访问接口
        let token = getToken();
        console.log("用户token--->",token);
        if(token){
          // 开始查用户信息
          getInfo().then(response=>{
            console.log("用户信息--->",response);
            if(response.code==200){
              this.user = response.data;
              if(this.user.avatar){
                this.avatarFilePath = process.env.VUE_APP_BASE_API + this.user.avatar;
              }
            }
          });
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .input-icon {
    height: 10px;
    width: 5px;
    margin-left: 2px;
  }
  .profileSpan {
    padding-left: 10px;
  }

  .logoImg {
    width: 150px;
    padding-left: 20px;
  }

  .messageImg {
    width: 25px;
    height: 25px;
  }

  .profileImg {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }

  .top {
    height: 60px;
    border: 1px solid #C3C3C3;
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  header {
    padding: 10px;

    a {
      font-weight: bold;
      color: #2c3e50;
      // &. 作用到同一个a标签上
      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>
